<template>
<div class="wholeContainer" @click="showCancel">
    <div class="forumItemContainer">
        <div class="left">
            <div class="upper">
                <div class="userPart">
                    <img :src="userInfo.picUrl" alt="头像">
                    <div class="userName">{{userInfo.nickname}}</div>
                </div>
                <div class="commentPart">
                    <div class="commentBtn"  v-if="showOp1" @click.stop="giveEdit(0)">修改</div>
                    <div class="commentBtn" @click.stop="giveEdit(1)">回复</div>
                    <div class="commentBtn"  v-if="showOp">删除</div>
                </div>
                
                <div class="posttime">评论发表: <TimeDiff :dateString="commentItem.postTime" /></div>
            </div>
        </div>
        <div class="contentContainer">
            <div class="contentPart">
                <div class="ql-editor content" v-html="commentItem.content"></div>
            </div>
        </div>
        <div class="bottomLine"></div>
    </div>
    <div v-if="showEdit" class="editContainer">
        <EditComment :type="type" :commentId="commentId"/>
    </div>
    <div class="commentContainer">
        <div v-for="(commentItem,index) in commentList" :key="index">
          <CommentItem :commentItem="commentItem" @deleteComment="deleteComment"/>
        </div>
    </div>
</div>
    
</template>

<script>
import Identicon from 'identicon.js'
import TimeDiff from "../components/TimeDiff.vue";
import EditComment from "../components/editComment.vue";
import CommentItem from "../components/commentItem.vue";
export default {
    name:'CommentDetail',
    data(){
        return {
            commentId:this.$route.query.commentId,
            userInfo:{},
            commentItem:{},
            commentList:[],
            showOp:false,
            showOp1:false,
            type:0,
            showEdit:false
        }
    },
    components:{
        TimeDiff,
        EditComment,
        CommentItem
    },
    mounted(){
        this.request()
    },
    methods:{
        showCancel(){
            this.showEdit = false
        },
        giveEdit(type){
            this.type = type
            this.showEdit = true
        },
        deleteComment(val){
            this.$axios({
                method:'get',
                url:`/api/comments/${this.commentId}/1`,
                headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
            }).then(res=>{
                console.log(res)
                if(res.data.code){
                    this.commentList = res.data.data
                }
                this.$forceUpdate()
            })
        },
        request(){
            this.$axios({
                method:'get',
                url:`/api/comments/commentId/${this.commentId}`,
                headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
            }).then(res=>{
                if(res.data.code){
                    this.commentItem = res.data.data
                    if(res.data.data.userId == localStorage.getItem('userId')||localStorage.getItem('uType') == 1){
                        this.showOp = true
                    }
                    if(res.data.data.userId == localStorage.getItem('userId')){
                        this.showOp1 = true
                    }
                    this.$axios({
                        method:'get',
                        url:`/api/users/${res.data.data.userId}`,
                        headers:{
                            'Content-Type':'application/json',
                            'token':localStorage.getItem('token')
                        }
                    }).then(res1=>{
                        if(res1.data.code){
                            this.userInfo = res1.data.data
                            if(!res1.data.data.picUrl){
                                this.userInfo.picUrl = 'data:image/png;base64,'+new Identicon(this.md5(res1.data.data.nickname), 420).toString()
                            }
                        }
                        
                    })
                }
            })
            this.$axios({
                method:'get',
                url:`/api/comments/${this.commentId}/1`,
                headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
            }).then(res=>{
                console.log(res)
                if(res.data.code){
                    this.commentList = res.data.data
                }
            })
        }
    },
    watch:{
        $route() {
            this.commentId = this.$route.query.commentId;
            this.request();
        },
    }
    

}
</script>

<style scoped>
    .wholeContainer{
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: #4d4d4d;
        overflow-y:scroll;
        overflow-x:hidden;
        padding-right: 25px;
        padding-left: 25px;
    }
    .forumItemContainer{
        width: 60%;
        margin-left: 20%;
        margin-top: 1%;
        padding-bottom: 1%;
    }
    .upper{
        /* background-color: aqua; */
        width: 97%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .userName{
        margin-left: 10px;
        font-size: 1.3em;
        color: #fff;
    }
    .userPart{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .userPart img{
        width: 10%;
        height: 10%;
        border-radius: 50%;
    }
    .posttime{
        width: 15%;
        font-size: 0.85em;
        color: #aaa;
    }
    .contentContainer{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 95%;
        height: 100%;
        margin-left: 2.5%;
        margin-top: 1%;
    }
    .contentPart{
        width: 95%;
        /* background-color: #fff; */
    }
    .commentPart{
        /* background-color: #fff */
        width: 40%;
        text-align: center;
        /* 让字垂直居中 */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: white;
    }
    .content{
        margin-top: 3%;
        font-size: 1.3em;
        color: #fff;
        font-family: 'SimHei';
        word-wrap: break-word;
    }
    .content a{
        color: #fff;
    }
    .bottomLine{
        width: 94%;
        margin-top: 0%;
        border-bottom: 1px dashed #aaa;
    }
    .commentPart{
        /* background-color: #fff */
        width: 15%;
        margin-left: 5%;
        margin-right: -2%;
        text-align: center;
        /* 让字垂直居中 */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #aaa;
    }
    .commentBtn{
        width: 30px;
        border-radius: 5px;
        background-color: #4d4d4d;
        color: #aaa;
        /* border: 1px solid white; */
        outline: none;
        cursor: pointer;
        font-size: 0.85em;
    }
    .commentBtn:hover{
        color: pink;
    }
    .editContainer{
        /* width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(0,0,0,0.5);
        z-index: 100;
        top: 0;
        left: 0; */
    }
    ::v-deep .ql-editor a{
        color: #fff;
    }
</style>